<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="*|/"><xsl:apply-templates/></xsl:template>

<xsl:template match="text()|@*"><xsl:value-of select="."/></xsl:template>

<xsl:template match='nbsp' name='nbsp'>
<xsl:text disable-output-escaping='yes'>&amp;nbsp;</xsl:text>
</xsl:template>

<xsl:include href='../xsl.include.main.xsl'/>

<xsl:template match="pois">

<div id="map" style="width: 100%; height: 100%;"></div>

<script type="text/javascript">

var iconB = new GIcon();
iconB.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
iconB.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconB.iconSize = new GSize(12, 20);
iconB.shadowSize = new GSize(22, 20);
iconB.iconAnchor = new GPoint(6, 20);
iconB.infoWindowAnchor = new GPoint(5, 1);

var iconR = new GIcon();
iconR.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
iconR.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconR.iconSize = new GSize(12, 20);
iconR.shadowSize = new GSize(22, 20);
iconR.iconAnchor = new GPoint(6, 20);
iconR.infoWindowAnchor = new GPoint(5, 1);

var iconG = new GIcon();
iconG.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
iconG.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconG.iconSize = new GSize(12, 20);
iconG.shadowSize = new GSize(22, 20);
iconG.iconAnchor = new GPoint(6, 20);
iconG.infoWindowAnchor = new GPoint(5, 1);

var iconY = new GIcon();
iconY.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
iconY.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconY.iconSize = new GSize(12, 20);
iconY.shadowSize = new GSize(22, 20);
iconY.iconAnchor = new GPoint(6, 20);
iconY.infoWindowAnchor = new GPoint(5, 1);

// Create a marker whose info window displays the given number.
function createMarker(point, name, icon) {
  var marker = new GMarker(point, icon);

  // Show this marker's index in the info window when it is clicked.
  var html = "<nobr><b>" + name + "</b></nobr>";
  GEvent.addListener(marker, 'click', function() {
	marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Center the map on Palo Alto.
var map = new GMap(document.getElementById("map"));
map.setMapType(map.mapTypes[1]);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl()); 
map.centerAndZoom(new GPoint(9.189731, 45.464483), 4);

// Add markers in the map viewport using the default icon.
<xsl:for-each select="poi[@tag='R1']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconR );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='R2']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconR );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='R3']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconR );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='V1']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconG );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='V2']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconG );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='V3']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconG );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='G1']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconY );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='P1']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconB );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='P2']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconB );
  map.addOverlay(marker);
</xsl:for-each>
<xsl:for-each select="poi[@tag='P3']">
  var point = new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>);
  var marker = createMarker(point, "<xsl:value-of select="@name"/>", iconB );
  map.addOverlay(marker);
</xsl:for-each>

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='R1']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
//points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points,"#ff0000", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='R2']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
//points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points,"#ff0000", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='R3']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
//points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points,"#ff0000", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='V1']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
//points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points,"#00ff00", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='V2']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
//points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points,"#00ff00", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='V3']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
//points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points,"#00ff00", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='G1']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
//points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points,"#ffff00", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='P1']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
map.addOverlay(new GPolyline(points,"#0000ff", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='P2']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
map.addOverlay(new GPolyline(points,"#0000ff", 10));

// Add a polyline points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
<xsl:for-each select="poi[@tag='P3']">
  points.push(new GPoint(<xsl:value-of select="@longitude"/>,
						 <xsl:value-of select="@latitude"/>) );
</xsl:for-each>
map.addOverlay(new GPolyline(points,"#0000ff", 10));

</script>

</xsl:template>

</xsl:stylesheet>